import React from 'react'
import propTypes from 'prop-types'
import request from './http'
import { filterProperties } from '../../utils'
import './txt-viewer.css'

const textAreaPropsFilter = [
  'rows',
  'cols',
  'autocomplete',
  'autofocus',
  'disabled',
  'placeholder',
  'readOnly',
  'required',
  'maxlength',
  'minlength',
  'wrap',
]

export default class TxtViewer extends React.Component {
  
  static propTypes = {
    src: propTypes.string.isRequired
  }

  state = {
    data: ''
  }

  textareaProps = () => {
    const props = this.props
    return filterProperties(props, textAreaPropsFilter, true)
  }

  getData = () => {
    request({
      url: this.props.src
    }).then(res => {
      this.setState({
        data: res
      })
    })
  }

  componentDidMount() {
    this.getData()
  }

  render() {
    let textareaClassName = 'l-textarea'
    if(this.props.resize === 'none') {
      textareaClassName += ' l-textarea-no--resize'
    }
    if(this.props.className) {
      textareaClassName += ` ${this.props.className}`
    }
    return (
      <textarea
        {...this.textareaProps()}
        className={textareaClassName}
        defaultValue={this.state.data}
      >
      </textarea>
    )
  }
}